import CodeView from '../../../shared/components/CodeView';
import { getDisplayElementById } from '../../shared/helpers';
import Blockquote from '../../../shared/components/Blockquote';
import * as Tiles from './base/example';

<div className="doc lead">
  A tile is a grouping of related information associated with a record.
</div>

<CodeView exampleOnly>
  {getDisplayElementById(Tiles.examples, "with-icon")}
</CodeView>

## About Tile

Tiles are set up to be displayed with or without an image/icon. The default pattern for tiles has an image/icon, a detail body which contains a list of information and action overflow menu dropdown. The detail body list, by default, comes as a name/value pairing but can be swapped out with a string of text or an inline horizontal list.

<Blockquote type="warning" header="Warning">
  <p>
    Tiles can have different groupings of information based on its context. Pay close attention to the markup, as each tile layout is constructed differently.
  </p>
</Blockquote>

## Base

<CodeView>
  {getDisplayElementById(Tiles.default)}
</CodeView>

## Examples

### Default with actions

<CodeView>
  {getDisplayElementById(Tiles.examples, "with-action")}
</CodeView>

### With icon

<CodeView>
  {getDisplayElementById(Tiles.examples, "with-icon")}
</CodeView>

### With avatar

<CodeView>
  {getDisplayElementById(Tiles.examples, "with-avatar")}
</CodeView>

### Task

<CodeView>
  {getDisplayElementById(Tiles.examples, "task")}
</CodeView>

### Article

<CodeView>
  {getDisplayElementById(Tiles.examples, "article")}
</CodeView>

### Article with like bar

<CodeView>
  {getDisplayElementById(Tiles.examples, "article-liker-bar")}
</CodeView>

### Board

<CodeView>
  {getDisplayElementById(Tiles.examples, "board")}
</CodeView>
